import {Button, Form, Select} from "antd";
import {useState} from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-javascript'; // 引入 JavaScript 模式
import 'ace-builds/src-noconflict/mode-golang'; // 引入 JavaScript 模式
import 'ace-builds/src-noconflict/theme-monokai'; // 引入 Monokai 主题
import 'ace-builds/src-noconflict/ext-language_tools';

type Mode = "golang" | "javascript"

const CodeEditor1 = () => {
    const [code, setCode] = useState<string>('console.log("Hello, World!")'); // 设置初始代码
    const [mode, setMode] = useState<Mode>("javascript")
    const onChange = (newValue: string) => {
        setCode(newValue);
    };

    const evalCode = () => {
        eval(code)
    }

    return (
        <div>
            <div className="m-2 mb-10">
                <Form layout={"inline"} className={"w-full"}>
                    <Form.Item>
                        <Button onClick={evalCode}>执行代码</Button>
                    </Form.Item>

                    <Form.Item label={"语言"} >
                        <Select style={{width:120}} value={mode} onChange={(value) => {
                            setMode(value)
                        }}>
                            <Select.Option value={"golang"}>golang</Select.Option>
                            <Select.Option value={"javascript"}>javascript</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <AceEditor
                mode={mode} // 设置编辑器模式
                theme="monokai" // 设置编辑器主题
                onChange={onChange}
                name="UNIQUE_ID_OF_DIV" // 为编辑器设置一个唯一的 ID
                // editorProps={{ $blockScrolling: true }} // 阻止编辑器滚动
                setOptions={{
                    enableBasicAutocompletion: true, // 启用基本自动补全
                    enableLiveAutocompletion: true, // 启用实时自动补全
                    enableSnippets: true, // 启用代码片段
                    showLineNumbers: true, // 显示行号
                    tabSize: 2, // 设置制表符大小
                    autoFocus: true,
                }}
                width="100%" // 设置编辑器宽度
                height="500px" // 设置编辑器高度
                value={code} // 设置编辑器的值
            />
        </div>
    );
};

export default CodeEditor1;
